<template>
    <div class="storeDetails">
        <Header title="店铺" />
        <div class="content">
            <div class="img"></div>
            <div class="foodSort">
                <div class="name">
                    {{ title }}
                    <img :src="img" alt="" class="store-img">
                </div>
                <van-tabs color="#ffc400">
                    <van-tab v-for="(item, index) in storeData" :title="item.name" :key="index">
                        <FootList :index="index" :foodData="item.data" />
                    </van-tab>
                </van-tabs>

            </div>
        </div>
        <van-action-bar>
            <van-action-bar-icon icon="chat-o" text="客服" />
            <van-action-bar-icon icon="cart-o" text="购物车" :badge="store.state.cartList.length" @click="goCart" />
            <van-action-bar-button type="warning" text="加入购物车" @click="handleAddCart" />
            <van-action-bar-button type="danger" text="立即购买" @click="goBuy" />
        </van-action-bar>

    </div>
</template>

<script>
import { reactive, toRefs } from 'vue';
import FootList from "../store/components/FoorList.vue";
import Header from "../../components/Header.vue";
import { useStore } from 'vuex'
import { useRouter } from 'vue-router'
import { showToast } from 'vant';

export default {
    components: {
        Header,
        FootList,
    },
    setup() {
        let store = useStore();
        let router = useRouter();
        let data = reactive({
            title: "古茗",
            img: "https://img2.baidu.com/it/u=2906730111,1647890107&fm=253&fmt=auto&app=138&f=JPEG?w=600&h=400",
            storeData: [
                {
                    name: "点菜",
                    data: {
                        content: "点菜",
                        items: [
                            {
                                text: "推荐",
                                children: [
                                    {
                                        pic: "http://www.juancha-jm.cn/uploads/allimg/210311/1-2103111H055D0.jpg",
                                        title: "a",
                                        num: 0,
                                        price: 20,
                                        id: 0,
                                        add: true,
                                    },
                                    {
                                        pic: "http://www.juancha-jm.cn/uploads/allimg/210311/1-2103111GK4218.jpg",
                                        title: "b",
                                        num: 0,
                                        price: 18,
                                        id: 1,
                                        add: true,
                                    },
                                    {
                                        pic: "http://www.juancha-jm.cn/uploads/allimg/210311/1-2103111GT6325.jpg",
                                        title: "c",
                                        num: 0,
                                        price: 21,
                                        id: 2,
                                        add: true,
                                    },
                                ],
                            },
                            {
                                text: "折扣",
                                children: [
                                    {
                                        pic: "http://www.juancha-jm.cn/uploads/allimg/210311/1-2103111H319102.jpg",
                                        title: "d",
                                        num: 0,
                                        price: 20,
                                        id: 3,
                                        add: true,
                                    },
                                    {
                                        pic: "http://www.juancha-jm.cn/uploads/allimg/210311/1-2103111H241Q3.jpg",
                                        title: "e",
                                        num: 0,
                                        price: 20,
                                        id: 4,
                                        add: true,
                                    },
                                ],
                            },
                            {
                                text: "主打产品",
                                children: [
                                    {
                                        pic: "http://www.juancha-jm.cn/uploads/allimg/210311/1-2103111H319102.jpg",
                                        title: "f",
                                        num: 0,
                                        price: 20,
                                        id: 5,
                                        add: true,
                                    },
                                    {
                                        pic: "http://www.juancha-jm.cn/uploads/allimg/210311/1-2103111H241Q3.jpg",
                                        title: "g",
                                        num: 0,
                                        price: 20,
                                        id: 6,
                                        add: true,
                                    },
                                ],
                            },
                        ],
                    },
                },
                {
                    name: "评价",
                    data: {
                        content: "评价",
                    },
                },
                {
                    name: "商家",
                    data: {
                        content: "商家",
                    },
                },
            ],
        });
        // 加入购物车
        const handleAddCart = (type) => {
            const newList = store.state.cartList || [];
            data.storeData.forEach(item => {
                item.data.items?.forEach(item => {
                    item.children.forEach(item => {
                        if (item.num > 0) {
                            newList.push(item);
                        }
                    });
                });
            });
            if (newList.length === 0) {
                // debugger;
                showToast('请选择商品');
                return;
            };
            store.commit("addcart", newList);
            type === "buy" ? goCart() : "";
        };

        const goCart = () => {
            router.push("/cart");
        };


        const goBuy = () => {
            handleAddCart("buy");
        };

        return {
            ...toRefs(data),
            handleAddCart,
            store,
            goCart,
            goBuy,
        }

    }
};
</script>

<style lang="less" scoped>
.storeDetails {
    height: 100%;
    display: flex;
    flex-flow: column;

    .content {
        flex: 1;
        overflow-y: auto;

        .img {
            background: url("../../assets/gm.png") no-repeat center/cover;
            width: 100%;
            height: 150px;
        }

        .foodSort {
            height: 500px;
            background-color: #fff;
            margin-top: -30px;
            border-radius: 20px 20px 0 0;

            .sort {
                margin-top: 10px;
            }

            .name {
                display: flex;
                padding: 20px;
                justify-content: space-between;

                .store-img {
                    width: 80px;
                    height: 80px;
                    border-radius: 10px;
                    margin-top: -30px;
                }
            }
        }
    }
}
</style>